<th:block th:fragment="update">
<script>
    function getRouteFormEl(){
        let { ref, reactive } = Vue;
        const FI = baseForm.item;
        const defaultV = () => {
            return {
                type: 1,
                openType: 1,
                title: '',
                icon: '',
                route: '',
                weigh: 1,
            }
        };
        const route = reactive(defaultV());
        let routeRef;
        const types = ref([]);
        const openTypes = ref([]);
        const routes = ref([]);
        const routeRule = ref({});
        const icons = [];
        for (const key in app.icons) {
            icons.push({
                value: app.icons[key],
                label: app.icons[key]
            });
        }
        const el = baseForm.form()
            .model("route")
            .ref('routeRef')
            .rules("routeRule")
            .addItems(
                FI.input("title", '标题').col(12, 12).required("Nihoa "),
                FI.radio("type", '路由类型').options('types'),
                FI.radio("openType", '打开类型').options('openTypes'),
                FI.select("icon", '图标').col(12, 12).options('icons').set('popper-class', 'icon-se').format(() => {
                    return "<el-icon><component :is='item.value'></component></el-icon>";
                }).afterRender((el) => {
                    el.setAttribute('id', "icon")
                    const tagEL = document.createElement("template");
                    tagEL.setAttribute('v-slot:label', '{label, value}')
                    tagEL.innerHTML = '<el-icon style="top: 2px;margin-right: 3px"><component :is="value"></component></el-icon>{{ value }}'
                    el.getElementsByTagName('el-select')[0].appendChild(tagEL)
                }),
                FI.autocomplete("route", '路由').set(':fetch-suggestions', 'queryRoute').col(12, 12),
                FI.input("weigh", '权重').col(12),
                FI.submit("submit")
            )
            .getEl(function (formEl, rules) {
                formEl.style.maxWidth = '1000px';
                routeRule.value = rules;
            });

        const configEl = document.createElement('el-config-provider');
        configEl.appendChild(el);
        configEl.setAttribute(':z-index', 22222222)

        sc.axios.get('/admin-base/route/get-enum-map', {name: 'openType'}).then((res) => {
            openTypes.value = res.data;
        })
        sc.axios.get('/admin-base/route/get-enum-map', {name: 'type'}).then((res) => {
            types.value = res.data;
        })
        sc.axios.get('/admin-base/route/get-routes').then((res) => {
            routes.value = res.data;
        })

        return {
            formEl:configEl,
            appInit(elId) {
                app.create("#" + elId, {
                    mounted(){
                        routeRef = this.$refs.routeRef;
                    },
                    setup() {
                        return {
                            route,
                            types,
                            openTypes,
                            routeRule,
                            icons,
                            queryRoute(value, cb) {
                                let res = [];
                                routes.value.filter(item => item.indexOf(value) > -1).forEach(item => {
                                    res.push({value: item})
                                });
                                cb(res);
                            },
                            submit(){
                                routeRef.validate((valid) => {
                                    if (!valid) {
                                        return;
                                    }
                                    sc.axios.post('/admin-base/route/create', route).then((res) => {
                                        if (res.code === 200) {
                                            parent.sc.message.success("操作成功");
                                            sc.closeCurrentPage();
                                        } else {
                                            sc.message.error(res.message);
                                        }
                                    });
                                });
                            }
                        }
                    }
                })
            },
            initData(data = null){
                if (data === null){
                    this.initData(defaultV());
                    return;
                }
                if (typeof data === 'object'){
                    sc.copyObjValue(data, route);
                    return;
                }
                sc.axios.get('/admin-base/route/get-info', {id: data}).then((res) => {
                    this.initData(res.data);
                });
            },
        }
    }
</script>
</th:block>